<template>


  <div class="rateContainer">

         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>兑换汇率</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
   </div>


  <el-tabs type="border-card">
  <el-tab-pane label="汇率" class="card-container">
  <el-select v-model="params.from" placeholder="请选择">
    <el-option
      v-for="item in moneyCode"
      :key="item.code"
      :label="item.name"
      :value="item.code">
    </el-option>
  </el-select>

  <el-select
    v-model="params.to"
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-for="item in moneyCode"
      :key="item.code"
      :label="item.name"
      :value="item.code">
    </el-option>
  </el-select>
  <el-container>
    <el-footer height="50px" style="line-height: 50px;">
      <el-row>
       <el-col :span='2'>汇率结果：</el-col>
       <el-col :span='12'>{{huilv}}</el-col> 
     </el-row>
    </el-footer>
  </el-container>
  </el-tab-pane>
 <el-button type="default" @click="getList" style="margin:20px 0;">查询</el-button>
 
</el-tabs>
  <loading v-if="loading" :tip='tip'></loading>
  </div>
</template>


<style scoped>
.ratio-input{
    width:400px;
}
.card-container{
    padding-top:20px;
}
</style>

<script>
import {api,apiGet} from '@/api/index';
import loading from "@/components/common/loading.vue";
export default {
  data() {
    return {
      loading:false,
      tip:'',
      params:{
        from:'',
        to:'',
        exchange:'买',
      },
      moneyCode:[
        {
          name:'人民币',
          code:'CNY',
          type:'法币'
        },{
          name:'港币',
          code:'HKD',
          type:'法币'
        },{
          name:'澳门元',
          code:'MOP',
          type:'法币'
        },{
          name:'马来西亚林吉特',
          code:'MYR',
          type:'法币'
        },{
          name:'新加坡元',
          code:'SGD',
          type:'法币'
        },{
          name:'日元',
          code:'JPY',
          type:'法币'
        },{
          name:'韩元',
          code:'KRW',
          type:'法币'
        },{
          name:'新台币',
          code:'TWD',
          type:'法币'
        },{
          name:'柬埔寨瑞尔',
          code:'KHR',
          type:'法币'
        },{
          name:'越南盾',
          code:'VND',
          type:'法币'
        },{
          name:'印度尼西亚卢比',
          code:'IDR',
          type:'法币'
        },{
          name:'菲律宾比索',
          code:'PHP',
          type:'法币'
        },{
          name:'文莱元',
          code:'BND',
          type:'法币'
        },{
          name:'泰铢',
          code:'THB',
          type:'法币'
        },{
          name:'美元',
          code:'USD',
          type:'法币'
        },{
          name:'比特币',
          code:'BTC',
          type:'虚拟币'
        },{
          name:'以太坊',
          code:'ETH',
          type:'虚拟币'
        },{
          name:'华克金',
          code:'WCG',
          type:'虚拟币'
        },
      ],
      activeName: "second",
      input4:"",
      huilv:'',
    };
  },
  components:{
    loading
  },
  methods: {
    getList(){
      this.loading=true;
      this.tip='正在换算中'
      apiGet.exchange.exchange({},true,this.params.from+'/'+this.params.to+'/'+this.params.exchange).then(res=>{
        //console.log(res);
        this.huilv=res.exchangeRate;
        this.loading=false;
      })
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    }
  }
};
</script>

